<template>
	<view class="Box">
		<view class="status_bar">
			<image src="../../../static/goback.png" @click="back"></image>
			<text>课程表</text>
		</view>


		<view class="data">{{year}}年{{month}}月</view>
		<view class="dataBox">
			<view class="classtable today" :class="bianseindex==index?'bianse':''" v-for="(item,index) in week" :key="index"
			 @click="bianse(event,index)">
				<view class="weekend" v-if="new Date().getDate() == item.day">今天
					<image src="../../../static/img/checked.png" mode=""></image>
				</view>
				<view class="weekend" v-else>{{item.week}}</view>
				<view class="day">{{item.day}}</view>
			</view>
		</view>
		
		<view class="listBox">

			<view class="classList" :key="index" v-for="(item,index) in coursTab">
				<view class="image"><image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1333624945,31312591&fm=26&gp=0.jpg" mode=""></image></view>
				<view class="message">
					<text>{{item.courseName}}</text>
					<view class="one">
						<image src="../../../static/img/parents/place.png"></image>
						<text>七教</text>
					</view>
					<view class="two">
						<image src="../../../static/img/parents/time.png"></image>
						<text>周三下午14:00-15:45</text>
					</view>
				</view>
			</view>

			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bianseindex: -1,
				year: '',
				month: '',
				week: [], //存放当前时间对应的`6p周
				coursTab:[
					{
						classimg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1248103273,3481633462&fm=26&gp=0.jpg',
						classname:'春天培训班',
						classplace:'四教',
						classtime:'周一上午10:00-12:00'
					},
					{
						classimg:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2690587153,2643787055&fm=26&gp=0.jpg',
						classname:'韩舞培训班',
						classplace:'七教',
						classtime:'周三下午14:00-15:45'
					},
					{
						classimg:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3296397875,3250033714&fm=26&gp=0.jpg',
						classname:'爵士舞培训班',
						classplace:'七教',
						classtime:'周一下午15:00-16:45'
					},
					
				],
				studentId:'',
			
			}
		},
		methods: {
			bianse(event,index) {
				console.log(event);
				this.bianseindex = index;
				this.xr();
			},
			//左上角返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getweek() {
				let arr = [];
				let json = {};
				let nowData = new Date();
				this.year = nowData.getFullYear();
				this.month = nowData.getMonth() + 1;
				//获取今天的是周几
				let currentDay = nowData.getDay();
				//把currentDay == 0赋值给周日
				if (currentDay == 0) {
					currentDay = 7
				}
				for (var i = 0; i < 7; i++) {
					json = {}
					let dayTime = nowData.getTime() - (currentDay - (i + 1)) * 24 * 60 * 60 * 1000;
					let day = new Date(dayTime).getDate()
					let week = '周' + '一二三四五六日'.charAt(i)
					json.week = week;
					json.day = day;
					arr.push(json);
				}
				this.week = arr;
			},
			xr(time){
				uni.request({
					url:'http://172.16.14.10:8084/student/findAllCourseByStudentCode',
					data:{
						date:time,
						studentCode:this.studentId
					},
					success:(res)=>{
						this.coursTab=res.data.data;
					}
				})
			}

		},
		mounted() {
			 this.studentId= uni.getStorageSync('studentId');
			this.getweek();
			//渲染今天的课程表
			var date=new Date();
			var day=date.getDate();
			this.xr(this.year+'-'+this.month+'-'+day);

		}
	}
</script>

<style lang="less" scoped>
	.Box {
		width: 100%;
		height: 100%;
		background-color: #fafafa;
	}

	.status_bar {
		display: flex;
		justify-content: left;
		align-items: center;
		width: 100%;
		height: 128rpx;
		background-color: #ffffff;


		image {
			width: 26rpx;
			height: 36rpx;
			margin-top: 26rpx;
			margin-left: 10rpx;
		}

		text {
			margin-left: 300rpx;
			margin-top: 26rpx;
		}
	}

	.data {
		font-size: 40rpx;
		color: rgb(46, 46, 46);
		margin-left: 24rpx;
		margin-top: 30rpx;
	}


	.dataBox {
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;

		.classtable {
			text-align: center;
			// margin-top: 30rpx;
			width: 90rpx;
			border-radius: 8rpx;
			height: 150rpx;
			background: #efeded;
			overflow: hidden;
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 0;
				height: 0;
				width: 24rpx;
				height: 24rpx;
			}

			.weekend {
				font-size: 25rpx;
				margin-top: 30rpx;
			}

			.day {
				font-size: 34rpx;
				margin-top: 20rpx;
			}
		}

		.classtable.active {
			background: #007AFF;
		}

		.bianse {
			background-color: #2db3fe !important;
		}
	}


	.classList {
		width: 690rpx;
		height: 220rpx;
		background: #ffffff;
		margin-left: 30rpx;
		margin-top: 34rpx;
		display: flex;
		align-items: center;

		.image {
			width: 166rpx;
			height: 148rpx;
			margin-left: 18rpx;
			background: #aa55ff;
			border-radius: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.message {
			margin-left: 28rpx;

			.one {
				margin-top: 28rpx;
			}

			.two {
				margin-top: 10rpx;
			}

			view {
				font-size: 22rpx;
				color: rgb(179, 179, 179);

				image {
					width: 22rpx;
					height: 22rpx;
				}

				text {
					margin-left: 8rpx;
				}
			}

		}

	}
</style>
